<template>
    <div class="medical-staff-detail">
        <NavCard></NavCard>
        <BreadCrumb class="bread-crumb" />
      <a-drawer
        :title="title"
        :maskClosable="true"
        width=650
        placement="right"
        :closable="true"
        @close="close"
        :visible="visible"
        style="overflow: auto;padding-bottom: 53px;">

        <h2 class="title">医务人员详情</h2>
        <div class="detail">
          <SubTitle title="基本信息"></SubTitle>
          <div class="content">
            <div class="row">
              <div class="label">医师姓名：</div>
              <div class="value">{{ infoData.name }}</div>
            </div>
            <div class="row">
              <div class="label">性别：</div>
              <div class="value">{{ infoData.gale }}</div>
            </div>
            <div class="row">
              <div class="label">任职资质：</div>
              <div class="value">{{ infoData.certification }}</div>
            </div>
            <div class="row">
              <div class="label">执业范围：</div>
              <div class="value">{{ infoData.practiceArea }}</div>
            </div>
            <div class="row">
              <div class="label">医师级别：</div>
              <div class="value">{{ infoData.practiceArea }}</div>
            </div>
            <div class="row">
              <div class="label">主要执业机构：</div>
              <div class="value">{{ infoData.organization }}</div>
            </div>
            <div class="row">
              <div class="label">审批机关：</div>
              <div class="value">{{ infoData.approvingAuthority }}</div>
            </div>
            <div class="row">
              <div class="label">抗菌药物处方权：</div>
              <div class="value">{{ infoData.prescribeRight }}</div>
            </div>
            <div class="row">
              <div class="label">限制类技术资源</div>
              <div class="value">{{ infoData.limitResource }}</div>
            </div>
            <div class="row">
              <div class="label">所属医院：</div>
              <div class="value">{{ infoData.hospital }}</div>
            </div>
          </div>
        </div>

      </a-drawer>

    </div>
</template>
<script>
import NavCard from '@/components/nav-card/index.vue'
import BreadCrumb from '@/components/bread-crumb/index.vue'
import SubTitle from '@/components/sub-title/index.vue'

export default {
    name: 'MedicalStaffDetail',
    components: {
        NavCard,
        BreadCrumb,
        SubTitle
    },
    data() {
        return {
          title: "操作",
          visible: false,
            infoData: {
                name: '小王',
                gale: '女',
                certification: '医师',
                practiceArea: '妇产科专业',
                level: '临床',
                organization: '医科大',
                approvingAuthority: '卫生局',
                prescribeRight: '限制使用级',
                limitResource: '无',
                hospital: ''
            }
        }

    },
  methods: {
    close() {
      this.$emit('close');
      this.visible = false;
    },
    add(scope) {
      this.visible = true;
      console.log("11111111",scope)
    }
  }
}
</script>
<style lang="scss" scoped>
.medical-staff-detail {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bread-crumb {
    margin-top: 21px;
    padding-left: 20px;
}

.title {
    font-size: 26px;
    color: #4B4B4B;
    font-weight: bold;
    margin: 0;
    margin-top: 18px;
    padding-left: 20px;
}

.detail {
    margin-top: 23px;
    margin-left: 20px;
    padding: 12px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 5px;

    .content {
        margin-top: 26px;
        padding-left: 16px;
        flex: 1;

        .row {
            margin-top: 26px;
            display: flex;

            &:nth-child(1) {
                margin-top: 0;
            }

            .label {
                color: #8B8B8B;
                font-size: 16px;
                font-weight: 500;
                width: 117px;
                margin-right: 29px;
            }

            .value {
                font-weight: 500;
                font-size: 16px;
                color: #4B4B4B;
            }
        }
    }
}
</style>
